<template>
  <el-card
    class="m_t_b_10px xd-LearningHome-PoliticalNews-NewsDetail"
    shadow="hover"
  >
    <div
      slot="header"
      class="clearfix"
    >
      <p class="new-title">
        <b v-text="decode(detail.questionTitle)"></b>
      </p>
    </div>
    <div style="font-family:'Microsoft YaHei';font-size: 16px; line-height: 1.6;" v-html="decode(detail.questionContent)"></div>


   <div class="my-comments">
    <div class="infinite-list-wrapper-container">
      <div style="overflow:auto;">
        <div v-for="item in detail.answerList" :key="item.id" class="comments-container">
          <div class="user-info">
            <div class="avatar-container">
              <img
                :class="item.avatar?'':'default'"
                :src="item.avatar|| require('../../../assets/imgs/avatar_default.png')"
              />
            </div>
             <p class="name" v-if="item.anonymity==1"> 匿名</p>
            <p class="name" v-else v-text="item.createUserName"></p>
          </div>
          <div class="content-info">
            <span style="float:right;margin-left:5px;">{{item.likeSum}}</span>
            <svg class="icon" v-if="item.likeFlag==0" @click="doPraise(item.answerId)" title="点赞" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;float:right;cursor: pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3108"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="3109"></path></svg>
            <svg class="icon" v-if="item.likeFlag==1" @click="cancelLike(item.answerId)" title="取消点赞" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;float:right;cursor: pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3880"><path d="M215.08031148 417.17398985L215.08031148 417.17398985l-113.22769408 0.26545946c-1.57296299-0.19676615-3.1668827-0.31901696-4.78758117-0.31901696-21.73855287 0-39.36015815 17.56106185-39.36015814 39.23790735l-0.35627463 471.14829255c0 21.67684551 17.62277035 39.23790733 39.34968036 39.23790733 2.13997454 0 4.21358365-0.21190199 6.25692216-0.53673985l112.12394268 0.04424364L215.07914753 417.17398985 215.08031148 417.17398985z" fill="#d81e06" p-id="3881"></path><path d="M984.61530452 433.27153267c-21.27516332-34.20582457-57.39508851-53.45977117-94.89470349-54.93144007-1.95135829-0.29107427-3.91668849-0.49715427-5.93790521-0.49715429l-219.64542635-0.23635172c14.88784043-42.46882645 23.02742754-88.10104263 23.02742756-135.63920952 0-30.83868274-3.50685641-60.84489557-9.95705173-89.74968376l-0.58214741 0.07917226c-11.71979378-50.63053426-57.11216526-88.41423757-111.44748714-88.41423757-63.23053568 0-114.48513194 51.12070258-114.48513196 114.168444 0 3.48939263 0.21655892 6.92173369 0.52626092 10.32380416-2.79663616 99.76262201-67.82018673 183.91553934-157.73054409 215.37479113l1e-8 562.53614078 512.63561844 0.21539499-1e-8 0.23751567c21.39392114 0.03376469 43.06028771-5.70155234 62.45045815-17.99417971 18.41798371-11.67787918 32.2672731-27.71837268 41.37205989-45.85459597 2.49741312-3.61746432 4.4685642-7.69133342 5.66080283-12.17037653l85.029632-374.31853058c1.18758059-4.44644238 1.50776262-8.90103581 1.15032407-13.23919928C1003.55023532 479.45678848 998.15954886 455.02289351 984.61530452 433.27153267L984.61530452 433.27153267z" fill="#d81e06" p-id="3882"></path></svg>
            <pre style="font-family:'Microsoft YaHei'; letter-spacing: 0.2em;line-height: 1.6;" v-html="item.answerContent"></pre>
            <div class="date" v-text="item.createTime"></div>
          </div>
        </div>
        <p v-if="!detail.answerList.length">{{NO_DATA}}</p>
      </div>
    </div>
  </div>

   <el-form
            :model="noteForm"
            status-icon
            ref="noteForm"
            label-width="70px"
            label-position="left"
            class="study-note-form"
          >
            <el-form-item
              label="内容"
              prop="content"
            >
              <el-input
                type="textarea"
                v-model="noteForm.content"
                autocomplete="off"
                rows="8"
              ></el-input>
            </el-form-item>
             <el-form-item label="">
                <el-checkbox v-model="noteForm.anonymity">匿名</el-checkbox>
            </el-form-item> 
            <el-form-item>
              <el-button
                type="primary"
                 @click="submitQuestion"
              >回复</el-button>
            </el-form-item>
          </el-form>
  </el-card>
</template>
<script>
  export default {
    name: 'NoticeDetail',
    data() {
      return {
        baseUrl: utils.baseURL,
        noteForm:{
          content:'',
          anonymity: false
        },
        detail: {
          v_notice_title: '',
          v_notice_content: '',
          answerList:[]
        },
        receiveDetailVisible: false,
        receiveUserList: [],
        receiveDeptList: [],
        receiveNextDeptList: [],
        receiveList: [],
        parentDept: {},
        deptHistory: [],
        showNext: false,
        selectDeptName: '', //选中的部门名称
        receiveParams: {} //初始接收详情参数
      };
    },
    watch: {
      $route: 'refresh'
    },
    computed: {
      receiveListIsDeptList: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1;
        });
      },
      receiveListIsDeptIsRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1 && item.readCount === item.userCount;
        });
      },
      receiveListIsDeptNotRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1 && item.readCount !== item.userCount;
        });
      },
      receiveListNotDeptNotRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept != 1 && item.readFlag != 1;
        });
      },
      receiveListNotDeptIsRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept != 1 && item.readFlag === 1;
        });
      }
    },
    mounted() {
      var activeMenu = this.$route.query.activeMenu || '/Cinziqao/Faq';
      this.$store.commit('updateActiveMenu', activeMenu);
      var id = this.$route.query.id;
      this.getDetail(id);
      utils.goTop();
    },
    methods: {
      registerDownnum(obj) {
        obj.downnum = parseInt(obj.downnum) + 1;
        this.$forceUpdate();
      },
      getDetail(id) {
        utils.post("/psychic/psychicQuestion/get", { questionId: id }, (res) => {
          if (res.success) {
            this.detail = res.data;
          }
        });
      },
      decode(value) {
        let result = '';
        try {
          result = decodeURI(value);
        } catch (ex) {
          console.warn(ex);
          result = value;
        }
        return result == 'undefined' ? '' : result;
      },

      dialogBack() {
        this.deptHistory.shift();
        this.fetchReceiveDetail(this.deptHistory[0], true);
      },
      refresh(item) {
        this.getDetail(item.query.id);
      },
      submitQuestion(){
        var id = this.$route.query.id;
        var param ={
          questionId: id,
          answerContent:this.noteForm.content,
          anonymity:this.noteForm.anonymity?1:0
        };
         utils.post("/psychic/psychicQuestion/addAnswer", param, (res) => {
          if (res.success) {
             this.$message.success('回答成功')
             this.getDetail(id);
              this.noteForm.content = '';
              this.noteForm.anonymity = false;
          }
        });
      },
      doPraise(answerId){//点赞 
        var that = this;
        var param={
          answerId:answerId
        }  
        utils.post("/psychic/psychicQuestion/addLike", param, (res) => {
            if (res.success) {
              this.$message.success('点赞成功') 
               var item  = that.detail.answerList.find(item=>item.answerId == answerId);
              item.likeSum ++;
              item.likeFlag = 1;
            }
        }); 
      },
      cancelLike(answerId){//去掉点赞
        var that = this;
        var param={
          answerId:answerId
        }  
         this.$confirm('确认取消点赞？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        utils.post("/psychic/psychicQuestion/cancelLike", param, (res) => {
            if (res.success) {
              this.$message.success('操作成功') 
              var item  = that.detail.answerList.find(item=>item.answerId == answerId);
              item.likeSum --;
              item.likeFlag = 0;
            }
        });
      }) 
      }
    }
  };
</script>
<style lang="less">
  @primary-color: #cb2c21;
  @bg-light-color: #de1632;

  .xd-LearningHome-PoliticalNews-NewsDetail {
    .new-title{
        font-size: 22px;
    }
    .clearfix {
      text-align: center;
      .desc {
        span {
          margin-right: 25px;
        }
        .receive-detail {
          color: @primary-color;
          border-color: @primary-color;
          padding: 6px 12px;
          span {
            margin-right: 0;
          }
        }
      }
    }
    .dialog-back {
      color: @primary-color;
      cursor: pointer;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }
    .bg-primary {
      background: @primary-color;
    }
    .bg-primary-light {
      background: @bg-light-color;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 30px;
      line-height: 30px;
      &.dept {
        line-height: 1;
        padding: 10px 0;
        cursor: pointer;
      }
    }
    .row-bg {
      padding: 10px 0;
      background-color: #ffffff;
    }

    .affix {
      display: block;
      text-align: center;
    }

  }

.my-comments {
  margin-bottom: 40px;
  .comments-container {
    .user-info {
      text-align: center;

      .avatar-container {
        display: flex;
        width: 58px;
        height: 58px;
        border-radius: 29px;
        background-color: #f1f1f1;
        justify-content: center;
        align-items: center;
      }
      img {
        display: flex;
        width: 100%;
        height: 100%;
      }
      img.default {
        width: 22px;
        height: 26px;
      }

      .name {
        margin-top: 10px;
        font-size: 14px;
        color: #333333;
      }
    }

    .content-info {
      flex: 1;
      background: url(../../../assets/imgs/comments_bg.png) no-repeat;
      background-size: 100% 100%;
      padding: 19px 17px 19px 37px;
      font-size: 16px;

      .date {
        text-align: right;
        color: #999999;
      }
    }
  }

  .infinite-list-wrapper-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    p {
      text-align: center;
    }
  }
}
</style>
